Creating a launcher icon with Adobe Illustrator template 1

Preparations

Open the template file via the menu bar: File > Open > select file to open.

Place the graphic

Select the PLACE YOUR GLYPH HERE layer and draw or place your graphic on that layer.

Scale the graphic

Scale your graphic to fit the dimensions of the focal zone, and place it within the centre of the zone as indicated by the guides. It may be necessary to temporarily group your graphic (CTRL/CMD + g) to scale it proportionally.

Apply a background

You can also switch to Illustrator’s pixel preview (View > Pixel Preview) to locate unwanted anti-aliasing effects and amend the image if necessary. If possible, align your shape / the anchor points into the pixel grid in order to avoid unwanted “half pixels”. Please note that moving the anchor points does change your original shape, so make sure you find a balance between creating crispness and preserving the original shape.

The images above show two versions of an icon in an activated pixel grid view. In the image in the left, an unwanted anti-aliasing is added to straight lines when the glyph's borders do not follow the grid lines (i.e., pixel borders). In the image on the right, the glyph is crisp and clean, as it is aligned to the pixel grid.

The template includes a variety of precast coloured backgrounds that you can choose from. To choose a background, turn its visibility on by activating the “eye” symbol next to your chosen item in the layers palette. (You may have to toggle another background color layer's visibility off, if it is above your selected one in the layer stack.)

Change the colour of your graphic if necessary. In the example above, the colour of the glyph was set to white to create a contrast against the pink background. White is also the recommended colour for launcher icon glyphs.

Apply graphic style

To add the graphic style, first select the glyph or logo element that has been placed on top of the background. If your icon consists of a combination of several elements, you will need to select them all in order to create a compound shape.

Select Window > Graphic Styles to open the Graphic Styles palette. If your graphic colour is not white, first click on the top right corner of the palette to see its options and remove the check mark from Override Character Color. Then apply the S40_FT_Launcher_Graphic_Style by selecting it. This will automatically apply the required drop shadow to your icon.

The icon design is now complete.

Save as PNG

The final step to complete the icon is to save it using the correct PNG settings.

In Adobe Illustrator CS5 or higher, select File > Save for Web & Devices, apply the settings as shown in the screenshot below, and click Save to save your PNG icon in the directory of your choice.

Save as PNG with Adobe Photoshop

To finalise your icon using Adobe Photoshop, follow the steps below.

In Adobe Illustrator:

In your Adobe Illustrator document, select the layer palette. In order to transfer all the necessary layers to Photoshop, these need to be unlocked first. Unlock the layers “DO NOT EDIT – HIGHLIGHT”, “HIGHLIGHT”, “DO NOT EDIT – BOUNDING BOX”, “BOUNDING BOX” and your selected background colour layer by clicking the lock indicators.

Select all elements of your Adobe Illustrator document (CTRL/CMD + a) and copy them (CTRL/CMD + c) into the clipboard.

In Adobe Photoshop:

Open Adobe Photoshop and create a new document with a canvas size of 56 x 56 pixels and the settings shown in the screenshot below:

Select your Photoshop document and paste the icon from the clipboard centred on the canvas (CTRL/CMD + “v”).

Select File > Save for Web & Devices, and apply the settings shown in the screenshot below:

Click Save to save your PNG icon in the directory of your choice.

Be sure to keep copies of the Illustrator and Photoshop files in case changes are required at a later date.

If you want to produce another icon, open the Illustrator template again, and use a new file for each icon.